{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The `Image` Mark\n",
    "\n",
    "`Image` is a `Mark` object, used to visualize images in standard format (png, jpg etc...), in a `bqplot` `Figure`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "It takes as input an `ipywidgets` [Image](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html#Image) widget"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### The ipywidgets Image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "import ipywidgets as widgets\n",
    "\n",
    "import bqplot.pyplot as plt\n",
    "from bqplot import LinearScale"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "image_path = os.path.abspath('../../data_files/trees.jpg')\n",
    "\n",
    "with open(image_path, 'rb') as f:\n",
    "    raw_image = f.read()\n",
    "ipyimage = widgets.Image(value=raw_image, format='jpg')\n",
    "ipyimage"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Using pyplot's imshow to display the image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "plt.figure(padding_y=0)\n",
    "axes_options = {'x': {'visible': False}, 'y': {'visible': False}}\n",
    "plt.imshow(image_path, 'filename')\n",
    "plt.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Displaying the image inside a bqplot Figure"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "fig = plt.figure(title='Trees', padding_x=0, padding_y=0)\n",
    "image = plt.imshow(ipyimage, 'widget')\n",
    "fig"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Mixing with other marks\n",
    "\n",
    "`Image` is a mark like any other, so they can be mixed and matched together."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "fig = plt.figure(padding_x=0, padding_y=0)\n",
    "plt.scales(scales={'x': LinearScale(min=-1, max=2), \n",
    "                   'y': LinearScale(min=-0.5, max=2)})\n",
    "image = plt.imshow(ipyimage, format='widget')\n",
    "plt.plot([0, 1, 1, 0, 0], [0, 0, 1, 1, 0], 'r')\n",
    "fig"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Its traits (attributes) will also respond dynamically to a change from the backend"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Full screen\n",
    "image.x = [-1, 2]\n",
    "image.y = [-.5, 2]"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
